<template>
  <van-form>
    <van-cell-group inset>
      <van-field
        v-model="metric"
        type="number"
        :label="metricLabel"
        @blur="metricToImperial"
        right-icon="more-o"
        @click-right-icon="togglePicker('metric')"
      />
      <van-field
        v-model="imperial"
        type="number"
        :label="imperialLabel"
        @blur="imperialToMetric"
        right-icon="more-o"
        @click-right-icon="togglePicker('imperial')"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary"> 转换 </van-button>
    </div>
  </van-form>

  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="columns"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script setup>
import { ref } from 'vue';
import { useTogglePicker } from './useTogglePicker.js';
import { useLength } from './useLength.js';

const { showPicker, columns, togglePicker } = useTogglePicker();
const {
  metric,
  metricUnit,
  metricLabel,
  imperial,
  imperialUnit,
  imperialLabel,
  onConfirm,
  metricToImperial,
  imperialToMetric,
} = useLength(showPicker, columns);
</script>
